<template>
  <div class="card-list">
    <div class="card-list-header flex">
      <span>{{ title }}</span>
      <slot name="more" />
    </div>
    <div class="card-body flex">
      <CardItem v-for="item in data" :key="item.id" :item="item" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import CardItem from "@/components/card-item/card-item.vue";
import type { DataType } from "@/components/card-item/types";

defineProps<{
  data: DataType[];
  title: string;
}>();
</script>

<style scoped lang="scss">
.card-list {
  padding: 20rpx;
}

.card-list-header {
  height: 60rpx;
  justify-content: space-between;
  background-color: #00cc99;
  align-items: center;
  color: #333;
  font-size: 14px;
}

.card-body {
  margin-top: 20rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
